<template>
  <div class="app-container">
    <!-- 使用 es-header组件 -->
    <!-- 这里的:fsize="16" 不加v-bind,这个16是一个字符串,加了双引号内是js表达式,传过去的16就是一个数字 -->
    <es-header title="购物车" bgcolor="#007BFF" :fsize="16"></es-header>
    <!-- 使用 es-goods组件 -->
    <es-goods
      v-for="item in goodslist"
      :key="item.id"
      :id="item.id"
      :thumb="item.goods_img"
      :price="item.goods_price"
      :title="item.goods_name"
      :count="item.goods_count"
      :checked="item.goods_state"
      @stateChange="changeGoodsState"
      @countChange="changeCount"
    ></es-goods>
    <!-- 使用 es-footer组件 -->
    <es-footer
      :total="total"
      :amount="amount"
      :isfull="isFull"
      @fullChange="onFullStateChange"
    ></es-footer>
  </div>
</template>

<script>
import EsHeader from './components/es-header/EsHeader.vue'
import EsFooter from './components/es-footer/EsFooter.vue'
import EsGoods from './components/es-goods/EsGoods.vue'
export default {
  data() {
    return {
      // 商品列表的数据
      goodslist: [],
      // 判断列表是否全选中
      isFull:false
    }
  },
  computed:{
    // 已勾选商品的总价
    amount(){
      let amt=0
      this.goodslist.filter(item=>item.goods_state).forEach(item=>{
        amt += item.goods_price * item.goods_count
      })
      
      return amt
    },
    // 已勾选商品的总数量
    total(){
      let total=0
      this.goodslist.filter(item=>item.goods_state).forEach(item=>{
         total += item.goods_count
      })
      return total
    }
  },
  // 组件实例创建完毕之后的生命周期函数
  created() {
    // 调用 methods 中的 getGoodsList 方法,请求商品列表的数据
    this.getGoodslist()
  },
  methods: {
    // 请求商品列表的数据
    async getGoodslist() {
      const { data: res } = await this.$http.get('/api/cart')
      console.log(res)

      if (res.status !== 200) return alert('请求商品列表数据失败! ')
      this.goodslist = res.list
    },
    // 监听全选按钮状态的变化
    onFullStateChange(isFull) {
      // 打印全选按钮最新的选中状态
      // console.log(isFull)
      this.goodslist.forEach(item=>item.goods_state=isFull)
    },
    // 监听商品选中状态变化的事件
    changeGoodsState(e) {
      const findResult = this.goodslist.find((item) => item.id === e.id)
      if (findResult) {
        findResult.goods_state = e.chk
      }

      // 遍历商品列表的选中状态,如果全部选中,则给子组件EsFooter传值,设置全选按钮状态
      this.isFull=this.goodslist.every(item=>item.goods_state)
    },
    //  监听商品数量变化的事件
    changeCount(e){
      // console.log(e)
      const findResult=this.goodslist.find(item=>item.id===e.id)
      if(findResult){
        findResult.goods_count=e.num
      }
    }
  },
  components: {
    EsHeader,
    EsFooter,
    EsGoods
  }
}
</script>

<style scoped lang="less" >
.app-container {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>